<template>
  <div>
    <span class="ft" >作业
    <el-select v-model="value" placeholder="第一章" class="cho">
    <el-option
      v-for="item in homeworks"
                  :key="item.id"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </span>
    <el-row style="height: 840px;
    marginTop: 50px;marginLeft: 150px;">
      <!--<search-bar></search-bar>-->
      <el-tooltip effect="dark" placement="right"
                  v-for="item in books"
                  :key="item.id">
        <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{item.sessionname}}の课后作业</p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          <span>{{item.sessionname}}</span>/
          <span>{{item.homeworkinfo}}</span>
        </p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          发布时间：<span>X</span>
        </p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          截止时间：<span>X</span>
        </p>
        <p slot="content" style="width: 300px" class="abstract">{{item.abs}}</p>
        <el-card style="width: 240px;margin-bottom: 20px;height: 300px;float: left;margin-right: 15px" class="book"
                 bodyStyle="padding:10px" shadow="hover">
          <div class="cover">
            <img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2741395713,3009869405&fm=26&gp=0.jpg' alt="作业图片">
          </div>
          <div class="info">
            <div class="title">
              <a href="">{{item.homework}}    {{item.sessionname}}</a>
            </div>

              <el-button type="primary"  @click="upworkclick(books.sessionname)">上传作业</el-button>
              <el-button type="success"  @click="downloadStuHW(item.url)" >下载作业</el-button>

          </div>
          <div class="plan">{{'👊'}}</div>
        </el-card>
      </el-tooltip>
    </el-row>
    <el-dialog title="上传作业" :visible.sync="upworkshow" style="width:1000px;margin:auto;">
      <Uphomework></Uphomework>
<!--      <el-upload-->
<!--        class="upload-demo"-->
<!--        action="api/upload"-->

<!--        :on-preview="handlePreview"-->
<!--        :on-remove="handleRemove"-->
<!--        :on-success="handleAvatarSuccess"-->
<!--        :before-remove="beforeRemove"-->
<!--        multiple-->
<!--        :limit="1"-->
<!--        :on-exceed="handleExceed">-->
<!--        <el-button size="small" type="primary">点击上传</el-button>-->

<!--      </el-upload>-->

<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="upworkshow = false">取 消</el-button>-->
<!--        <el-button type="primary"  @click="uploadwork()">上传</el-button>-->
<!--      </div>-->
    </el-dialog>
  </div>
</template>

<img src="../../assets/czxt.jpg" height="375" width="500"/>
<script>
    import UpVideo from "../teacher/UpVideo";
    import Uphomework from "./UpHomework";
    export default {
        name: 'CourseDetails',
      components: {Uphomework, UpVideo},
      data () {
            return {
                fileList: [],

                books: [],
              background: {
                backgroundPosition: "center center",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover",
              },
              upworkshow:false,
              usershow:false,
              user:{},
              course:{},
              mates:'',
              works:{},
              upwork:{},
              FileUrl: '',
              filelist:{},
              loginname:window.sessionStorage.getItem('username')
            }
        },
        created () {
    this.getLesson()
  },
    methods:{
      getLesson() {
        this.$axios
          .post('/studenthomework', {
           username:window.sessionStorage.getItem('username')
          })
          .then(successResponse => {
            console.log(successResponse.data)
            this.books = successResponse.data

          })
          .catch(failResponse => {
          })
      },
      open() {
        this.stuVisible = true
      },
      upworkclick(sessionname)
      {
        this.upworkshow=true;
        this.upwork.workname=this.books.homeworkname;
        this.upwork.username=this.loginname;
        this.upwork.sessionname=sessionname;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {

        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      downloadStuHW (row) {
         console.log(row)
        // for (var i = 0; i < this.allJoin.length; i++) {
        //   if (this.allJoin[i].tel === row.stuid) {
        //     this.flodes = this.allJoin[i].url
        //   }
        // }
        const urls = 'http://localhost:8443/images/' + row
        window.location.replace(urls)
      },
    }

    }
</script>

<style scoped>
  .cover {
    width: 200px;
    height: 150px;
    margin-bottom: 7px;
    overflow: hidden;
    cursor: pointer;
  }

  img {
    width: 200px;
    height: 150px;
    /*margin: 0 auto;*/
  }

  .title {
    font-size: 14px;
    text-align: left;
  }

  .author {
    color: #333;
    width: 90px;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }
  .plan {
    color: #dd6161;
    width: 100%;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: right;
  }

  .abstract {
    display: block;
    line-height: 17px;
  }

  a {
    text-decoration: none;
  }

  a:link, a:visited, a:focus {
    color: #3377aa;
  }

  .ft{
    font-style: inherit;
    font-size: 40px;
    padding-right:400px ;
  }
  .cho{
    padding-left:100px ;
  }
</style>
